<template>
  <div class="table">
    <el-table size="large" :data="data" style="width: 100%" :row-key="rowKey">
      <el-table-column :prop="item.name" :align="item.align" :type="item.type" :label="item.title" :width="item.width"
        v-for="(item, index) in cols" :key="index">
        <template v-if="item.slot" #default="{ row, index }">
          <slot :name="item.slot" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40, 50]"
      :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>
<script>
import { ref, reactive, toRefs, } from 'vue'
export default {
  props: {
    cols: {
      type: Object,
      required: true,
      default: () => {},
    },
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    currentPage:{
      type:Number
    },
    pageSize:{
      type:Number
    },
    background:{
      type:Boolean
    },
    total:{
      type:Number
    }
  },
  setup(props,{emit}) {
    const handleSizeChange=(val)=>{
      // console.log(val);
          emit('handleSizeChange',val)
          
      }
    const handleCurrentChange=(val)=>{
      // console.log(val);
          emit('handleCurrentChange',val)
      }
    return {
      handleSizeChange,
      handleCurrentChange,
      ...toRefs()
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
